import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

import {
  BasicExample,
  EventListeners,
  MarkerClusterOptions,
  MarkerOptions,
  MarkerPopup,
  MarkerTooltip,
} from './examples';

<Meta title="React Leaflet MarkerCluster" />

# Basic example

Just grab your markers inside `<MarkerClusterGroup />` component, right after `<TileLayer />`:

```javascript
import { Map, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  {/* Put <MarkerClusterGroup {...props} /> inside react-leaflet after <TileLayer /> */}
  <MarkerClusterGroup>
    <Marker position={[49.8397, 24.0297]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[51.5074, -0.0901]} />
  </MarkerClusterGroup>
</Map>
```

If you would like to pass some props to the Marker, please use [react-leaflet Marker component API](https://react-leaflet.js.org/docs/en/components.html#marker).

<Preview>
  <Story name="Basic example">{BasicExample}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/basic.js)

------

# Event listeners

Just pass event handler into appropriate component, like:

```javascript
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup
      onClusterClick={
        cluster => console.warn('cluster-click', cluster, cluster.layer.getAllChildMarkers())
      }
    >
      <Marker
        position={[49.8397, 24.0297]}
        onClick={
          marker => console.warn('marker-click', marker, marker.target.getLatLng())
        }
      />
      <Marker
        position={[52.2297, 21.0122]}
        onClick={
          marker => console.warn('marker-click', marker, marker.target.getLatLng())
        }
      />

      <Marker position={[51.5074, -0.0901]}>
        <Popup
          minWidth={200}
          closeButton={false}
          onClose={popup => console.warn('popup-close', popup)}
        >
          <div>
            <b>Hello world!</b>
            <p>I am a lonely popup.</p>
          </div>
        </Popup>
      </Marker>
    </MarkerClusterGroup>
</Map>
```

<Preview>
  <Story name="Event listeners">{EventListeners}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/event-listeners.js)

------

# Cluster custom icon

Leaflet.markercluster support some helpful options for clustered markers customization like: <br />
**showCoverageOnHover, maxClusterRadius** or **iconCreateFunction.**

Just pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-options) to **MarkerClusterGroup** as **prop**.

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

// Function for creating custom icon for cluster group
// https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers
// NOTE: iconCreateFunction is running by leaflet, which is not support ES6 arrow func syntax
// eslint-disable-next-line
const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: \`<span>\${cluster.getChildCount()}</span>\`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),
  });
};

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  {/* Pass Leaflet.markercluster option directly to MarkerClusterGroup as prop */}
  <MarkerClusterGroup
    showCoverageOnHover={false}
    spiderfyDistanceMultiplier={2}
    iconCreateFunction={createClusterCustomIcon}
  >
    <Marker position={[49.8397, 24.0297]} />
    <Marker position={[50.4501, 30.5234]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[50.0647, 19.9450]} />
    <Marker position={[48.9226, 24.7111]} />
    <Marker position={[48.7164, 21.2611]} />
    <Marker position={[51.5, -0.09]} />
    <Marker position={[51.5, -0.09]} />
    <Marker position={[51.5, -0.09]} />
  </MarkerClusterGroup>
</Map>
```

And do not forget about styles for your class:
```css
/* Customize the Clustered Markers */
.marker-cluster-custom {
  background: #9370db;
  border: 3px solid #ededed;
  border-radius: 50%;
  color: #ededed;
  height: 40px;
  line-height: 37px;
  text-align: center;
  width: 40px;
}
```

If you would like to pass some props to the Cluster, please check [List of all Leaflet.markercluster options](https://github.com/Leaflet/Leaflet.markercluster#all-options)

<Preview>
  <Story name="Cluster custom icon">{MarkerClusterOptions}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/marker-cluster-options.js)

------

# Marker icon and title

Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js) <br />
For setting Marker options, please use [react-leaflet Marker API](https://react-leaflet.js.org/docs/en/components.html#marker)

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

import redFilledMarker from './icons/red-filled-marker.svg';

// Create marker icon according to the official leaflet documentation
const redMarker = L.icon({
  iconUrl: redFilledMarker,
  iconSize: [40, 40],
  iconAnchor: [20, 40],
});

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup>
    <Marker position={[49.8397, 24.0297]} icon={redMarker} />
    <Marker position={[50.4501, 30.5234]} />
    <Marker position={[52.2297, 21.0122]} title="Warszawa title on hover" />
    <Marker position={[50.0647, 19.9450]} />
    <Marker position={[48.9226, 24.7111]} title="San Frankivsko title on hover" />
    <Marker position={[48.7164, 21.2611]} />
    <Marker position={[51.5, -0.09]} icon={redMarker} title="London title on hover" />
  </MarkerClusterGroup>
</Map>
```

If you would like to pass some props to the Cluster, please check [List of all Leaflet Marker options](http://leafletjs.com/reference.html#marker-option)

<Preview>
  <Story name="Marker icon and title">{MarkerOptions}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/marker-options.js)

------

# Marker popup

Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js) <br />
Create Popup for Marker as easy, as to cluster all markers. <br />
Just pass **react-leaflet Popup** component  to the **Marker** as a child: <br />

```javascript
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

import redFilledMarker from './icons/red-filled-marker.svg';

// Create marker icon according to the official leaflet documentation
const redMarker = L.icon({
  iconUrl: redFilledMarker,
  iconSize: [40, 40],
  iconAnchor: [20, 40],
});

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup>
    <Marker position={[49.8397, 24.0297]} icon={redMarker}>
      <Popup>
        <div>
          <b>Hello world!</b>
          <p>I am a clustered popup.</p>
        </div>
      </Popup>
    </Marker>

    <Marker position={[50.4501, 30.5234]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[50.0647, 19.9450]} />
    <Marker position={[48.9226, 24.7111]} />
    <Marker position={[48.7164, 21.2611]} />

    <Marker position={[51.5, -0.09]}>
      <Popup minWidth={200} closeButton={false}>
        <div>
          <b>Hello world!</b>
          <p>I am a lonely popup.</p>
        </div>
      </Popup>
    </Marker>
  </MarkerClusterGroup>
</Map>
```

If you would like to pass some props to the Cluster, please check [List of all Leaflet Popup options](http://leafletjs.com/reference.html#popup-option)

<Preview>
  <Story name="Marker popup">{MarkerPopup}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/marker-popup.js)

------

# Marker tooltip

Base on: [react-leaflet example](https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/tooltip.js) <br />
Creation of Tooltip for Marker as easy, as a creation of Popup. <br />
Just pass **react-leaflet Tooltip** component  to the **Marker** as a child: <br />

```javascript
import { Map, TileLayer, Marker, Tooltip } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

// Setup Tooltip according to react-leaflet documentation
// https://react-leaflet.js.org/docs/en/examples.html

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup>
    <Marker position={[49.8397, 24.0297]}>
      <Tooltip>
        <span>my tooltip text 1</span>
      </Tooltip>
    </Marker>

    <Marker position={[50.4501, 30.5234]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[50.0647, 19.9450]} />
    <Marker position={[48.9226, 24.7111]} />
    <Marker position={[48.7164, 21.2611]} />

    <Marker position={[51.5, -0.09]}>
      <Tooltip direction="bottom">
        <span>my tooltip text 1</span>
      </Tooltip>
    </Marker>
  </MarkerClusterGroup>
</Map>
```

If you would like to pass some props to the Cluster, please check [List of all Leaflet Tooltip options](http://leafletjs.com/reference.html#tooltip-option)

<Preview>
  <Story name="Marker tooltip">{MarkerTooltip}</Story>
</Preview>

[GitHub source code](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/.storybook/examples/marker-tooltip.js)

